import { CheckOutlined } from '@ant-design/icons';
import './PlayListItem.scss';
import { useSelector, useDispatch } from 'react-redux';
import { setUserStatus } from '@/store/modules/user';



function PlayListItem({itemInfo}){
    const dispatch = useDispatch();
    const { user_status } = useSelector(state => state.user);

    const handleClick = async () => {
        await dispatch(setUserStatus({
            ...user_status,
            video_url:itemInfo.video_url,
            video_id:itemInfo.video_id
        }))
        window.location.reload();
        
    }

    return (
        <li className='PlayListItem' onClick={handleClick}>
            <h3>{itemInfo.video_name}</h3>
            <div className={itemInfo.if_video_finish?'finish':'unfinish'}><CheckOutlined /></div>
        </li>
    )
}

export default PlayListItem;